<%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>查看所有日志信息</title>

    <link href="../layui/css/layui.css" type="text/css" rel="stylesheet">
    <%--layui设置table行高度的方法--%>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
    <script src="../layui/layui.js" type="text/javascript"></script>

    <script type="text/javascript">

        layui.use('table', function () {
            var table = layui.table;
            //执行一个laypage实例
            table.render({
                elem: "#myTable",//写id选择器
                //SpringBoot中直接请求showall,在SpringMVC中请求showall.do
                url: "${pageContext.request.contextPath}/log/listLog",//数据接口，请求的地址
                width: 1230,
                page: true,//开启分页

                //开启table表格头部的工具栏区域
                toolbar: '#myToolbar',//id选择器

                //列
                cols: [[
                    {type: "checkbox"},
                    {title: "编号", field: "logId"},
                    {title: "访问者",templet:"#username"},
                    {title: "访问时间", field: "logDate"},
                    {title: "操作内容", field: "logContent"},
                    {title: "操作类型", field: "logType"},
                    {title: "访问者IP", field: "logIp"},
                    /*{title: "操作", templet: "#caozuo"}*/

                ]]
            });
        });



        //搜索操作
        function doSearch() {
            //1.得到input输入框中的值
            var logType = $("#logType").val();
            var logContent = $("#logContent").val();
            //2.发送请求，接受数据
            //使用table模块
            layui.use('table', function () {
                var table = layui.table;
                //reload方法完成数据的重新加载
                table.reload("myTable", {
                    where: {"logContent":logContent,"logType": logType}//发送的额外参数
                })
            })
        }
    </script>

    <script type="text/html" id="username">
        {{d.admin.username}}

    </script>

</head>

<body>
    <%--table表格放在body最上面--%>
    <table id="myTable"></table>

    <%--templet选择器--%>
    <div id="myToolbar" style="display: none">
        <%--组装行内表单--%>
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" class="layui-input" placeholder="请输入相关内容" id="logContent">
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select id="logType">
                    <option value="">请选择操作类型</option>
                    <option value="select">select</option>
                    <option value="insert">insert</option>
                    <option value="delete">delete</option>
                    <option value="update">update</option>

                </select>
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <button type="button" class="layui-btn-sm layui-btn-radius layui-btn-normal" onclick="doSearch()">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
            </div>
        </div>
    </div>

</body>
</html>
